 <template>
  <div slot="book" style="padding-top: 20px;background: #f2f6fa;">
    <a-row type="flex" justify="center">
      <a-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19">
        <!-- 统一检索   纸书 -->
        <a-card :headStyle="headStyles" style="width: 100%">
          <search-box style="margin: 20px auto 40px;display:none"></search-box>
          <a-row
            type="flex"
            justify="space-around"
            style="margin: 30px 0px"
          >
            <a-col :xs="23" :sm="23" :md="10" :lg="3" :xl="3">
              <img
                align="center"
                :src="details.cover ? details.cover : details.originalCover"
                width="100%"
                style="margin: 0 auto"
              />
            </a-col>

            <a-col :xs="24" :sm="24" :md="20" :lg="17" :xl="17">
              <a-row>
                <blockquote>
                  <div class="list-group-item-text text-muted" name="author">
                    <p>
                      电子书名称：
                      <span style="color: red">{{ details.title }}</span>
                    </p>
                    <p>
                      出版日期：<span style="color: red">{{
                        details.publish_date
                      }}</span>
                    </p>
                    <p>阅读人次： --</p>
                    <p>出版社： {{ details.publisher }}</p>
                    <p>详情： {{ details.intro }}</p>
                  </div>
                  <a-row type="flex">
                    <a-col :xs="24" :sm="24" :md="13" :lg="4" :xl="4">
                      <a
                        :href="details.read"
                        target="_blank"
                        title="原版阅读"
                        class="btn btn-success"
                      >
                        原版阅读
                      </a>
                    </a-col>
                  </a-row>
                </blockquote>
              </a-row>
            </a-col>
          </a-row>
        </a-card>
        <a-row v-if="sample1" style="margin-top:20px">
              <a-col
                :xs="24"
                :sm="24"
                :md="13"
                :lg="24"
              >
              <a-table
                  :columns="columns"
                  :data-source="sample1"
                   :rowKey="record=>record.id"
                  :scroll="{ y: 240 }"
                  size="middle"
                  :pagination="false"
                >
                <a slot="action"  slot-scope="item"  href="javascript:;" @click="chaolianjie(item)">点击查看 <a-icon type="swap-right" /></a>
                </a-table>
              </a-col>
        </a-row>
        <div v-if="ismarc_no">
<a-divider orientation="left" dashed>
          相关纸书
        </a-divider>
        <!-- 纸书详情 -->
        <a-row type="flex" justify="center">
              <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                <a-card>
                  <div class="logo" />
                 
                  <a-row>
                    <a-col
                      :span="i == 0 ? 5 : 3"
                      v-for="(c, i) in bookinfo_columns"
                      :key="i"
                      class="break"
                    >
                      {{ c }}
                    </a-col>
                  </a-row>
                  <a-row>
                    <a-divider dashed />
                  </a-row>
                  <a-row v-for="(d, i) in bookinfo_data" :key="i">
                    <a-col
                      :span="j == 0 ? 5 : 3"
                      v-for="(cd, j) in d"
                      :key="j"
                      v-html="cd"
                      class="break"
                    >
                      {{ cd }}
                    </a-col>
                    <a-divider dashed />
                  </a-row>
                </a-card>
              </a-col>
             
        </a-row>
        </div>
        
      </a-col>
    </a-row>
  </div>
</template>

<script>
import axios from "axios";
// import VueAxios from "vue-axios";
import appApi from "../../../utils/api";
import SearchBox from "./common/SearchBox.vue";
export default {
  data: () => ({
    details: [],
    muluText: Array,
    is_bookinfo_visible: false,
    is_spinning: false,
    header: {},
    body: {},
    info: [],
    headStyles: {
      color: "#2780e3",
      background: "#f5f5f5",
    },
    customStyle: "background:#000,color:#2780e3",
    sample1:[],
        columns: [
      {
        title: "标题",
        dataIndex: "title",
      },
      {
        title: "类型",
        dataIndex: "typeName",
      },
      {
        title: "",

        slots: { title: "link" },
        // width: 150,

        // dataIndex: '',
        key: "x",
        scopedSlots: { customRender: "action" },
        dataIndex: "link",
      },
    ],
    ismarc_no:false,  //判断是否有纸书
    bookinfo_data: [],
    intro: "",
    bookinfo_columns:[],
    bookinfo_column:[]//纸书详情
  }),
  watch: {},
  components: {
    "search-box": SearchBox,
  },
  computed: {
    getquery() {
      console.log(this.$store.state)
      return this.$store.state.NewEbook.books.detailquery;
    },
  },
  methods: {
    chaolianjie(e) {
      window.open(e);
    },
    // 电子书
    GetEBookInfo: function () {
      this.is_bookinfo_spinning = true;
      var that = this;
      console.log(that.$store.state.NewEbook.books.detailquery)
      appApi.Newdetail(that.$store.state.NewEbook.books.detailquery.id)
        .then((response) => {
          console.log(response)
          // 判断设备
          let flag = navigator.userAgent.match(
            /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
          );
          response.data.read = flag
            ? response.data.wx_read
            : response.data.pc_read;
          that.details = response.data;
          that.Getsmail(response.data.isbn)
          that.is_bookinfo_spinning = false;
        });
    },
    Getsmail(isbn){
      var that = this;
      //  appApi.isbnguanlian(isbn)
      //   .then(res => {
      //     console.log('777777777777777')
      //       console.log(res)
      //       if (res.status == 200 && res.data) {
      //          that.sample1 = res.data
      //       }
      //   })
      axios.get('./static/config.json').then((res) => {
          if(res.status == 200){
              for(var i = 0;i<res.data.isbnguanlian.length;i++){
                  axios.get(res.data.BaseUrl_ + res.data.isbnguanlian[i] + isbn)
                      .then(res => {
                          console.log('---------')
                         console.log(res)
                         that.sample1 = that.sample1.concat(res.data)
                      })
                      .catch(err => {
                        console.log(err)
                      })
              }
          }
      })

    
    },
    // 获取纸书详情
    GetBookInfo: function (marc_no) {
      this.$store.state[
        this.$store.state.Namedparent.name
      ].books.loading_over = false;
      // axios.get("./static/config.json").then((res) => {
      //   this.picimg = res.data.pagerpic + this.$route.query.isbn;
      // });

      this.is_bookinfo_spinning = true;
      var that = this;
      var param = { marc_no: marc_no };
      appApi.PagerGetBookInfo(param).then((response) => {
        var data = response.data;
        var x = data;
        that.info = x.info;
        that.bookinfo_columns = x.header;
        that.bookinfo_data = x.body;
        // that.is_bookinfo_spinning = false;
      });
    },
  },
  mounted() {
    this.$store.commit("NewEbook/ChangeDetailQuery", this.$route.query);
    this.ismarc_no = this.$route.query.marc_no ? true : false;
    this.GetEBookInfo();
    this.GetBookInfo(this.$route.query.marc_no); //获取纸书详情
    //this.$store.dispatch(this.$store.state.Namedparent.name+'/epacall');
    // console.log(this.muluText)
    // var marc_no = this.$route.params.id;

    // console.log(" %c htis marc_no: ", "color:brown;", marc_no);
    // if (marc_no == this.bookid) {
    // if (!this.is_bookinfo_visible) {
    // this.is_bookinfo_visible = true;
    // this.GetBookInfo(marc_no);
    // this.$emit("ShowBookid", marc_no);
    // }
    // }
  },
};
</script>

<style scoped>
/deep/.ant-collapse {
  margin: 10px auto !important;
}
/deep/.ant-collapse-header {
  color: blueviolet !important;
}
.text-muted {
  font-size: 15px;
}
.text-muted p {
  border-bottom: 1px dashed #efefef;
  line-height: 2;
}
.text-muteds {
  text-align: center;
  margin: 5px auto;
}
.text-muteds p {
  margin: 0;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
}
.btn-success {
  color: #ffffff;
  background-color: #3fb618;
  border-color: #3fb618;
  text-align: center;
  padding: 10px 10px;
  font-size: 15px;
  display: block;
}
.btn-primary {
  color: #ffffff;
  background-color: #2780e3;
  border-color: #2780e3;
  padding: 10px 10px;
  font-size: 15px;
  text-align: center;
  display: block;
}
.btn-warning {
  color: #ffffff;
  background-color: #ff7518;
  border-color: #ff7518;
  padding: 10px 10px;
  font-size: 15px;
  text-align: center;
  display: block;
}
.btn-danger {
  color: #ffffff;
  background-color: #ff0039;
  border-color: #ff0039;
  padding: 10px 10px;
  font-size: 15px;
  text-align: center;
  display: block;
}
/deep/.ant-collapse {
  margin: 10px auto !important;
}
/deep/.ant-collapse-header {
  color: blueviolet !important;
}
.text-muted {
  font-size: 15px;
}
.text-muted p {
  border-bottom: 1px dashed #efefef;
  line-height: 2;
}
.text-muteds {
  text-align: center;
  margin: 5px auto;
}
.text-muteds p {
  margin: 0;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
}
.btn-success {
  color: #ffffff;
  background-color: #3fb618;
  border-color: #3fb618;
  text-align: center;
  padding: 10px 10px;
  font-size: 15px;
  display: block;
}
.btn-primary {
  color: #ffffff;
  background-color: #2780e3;
  border-color: #2780e3;
  padding: 10px 10px;
  font-size: 15px;
  text-align: center;
  display: block;
}
.btn-warning {
  color: #ffffff;
  background-color: #ff7518;
  border-color: #ff7518;
  padding: 10px 10px;
  font-size: 15px;
  text-align: center;
  display: block;
}
.btn-danger {
  color: #ffffff;
  background-color: #ff0039;
  border-color: #ff0039;
  padding: 10px 10px;
  font-size: 15px;
  text-align: center;
  display: block;
}
.tabtitle{
  font-weight: bold;
  text-align: right;
  margin-right: 20px;
}
.pane___1dzXN {
    height: 30px;
    background: #eafcff;
    line-height: 30px;
    margin-bottom: 20px;
}
.active___3tl-S {
    color: #fff;
    font-weight: 700;
    background: #00bfe6;
    padding: 0 20px;
    display: inline-block;
}
.break{
  word-break: break-word;
}
</style>
